<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <title>bootstrap-modal-test</title>
</head>
<body>

<div class="container">

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>

    <div>
        <button class="btn btn-success" id="btn1">按钮</button>
    </div>

</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.js"></script>
<script src="../src/bootdialog.js"></script>
<script>

    var btn1 = document.querySelector('#btn1');
    btn1.addEventListener('click', function () {

        //简单的通知，快速使用,一个参数时表示 body
        // BootDialog.fire('这只是一个简单的通知!!');


        //携带标题，快速使用，两个参数，参数一表示 内容，参数二 ：标题
        //BootDialog.fire('“先天下之忧而忧，后天下之乐而乐”乎！噫！微斯人，吾谁与归？','岳阳楼记');


        //也可以通过配置
        // BootDialog.fire({
        //     title: "标题",
        //     body: "内容",
        // });


        //自定义按钮内容和按钮样式
        // BootDialog.fire({
        //     title: "标题",
        //     body: "一些通知内容233",
        //     btnText: '朕知道了',
        //     btnClass: 'btn-success'
        // });


        //自定义按钮
        // BootDialog.fire({
        //     body: "确定删除该用户么？",
        //     //false:不显示 close按钮
        //     btnShow: false,
        //     buttons: [
        //         {
        //             text: '确定',
        //             btnClass: 'btn-success',
        //             action: function () {
        //                 BootDialog.fire('success');
        //             }
        //         },
        //         {
        //             text: '一会儿再说',
        //             btnClass: 'btn-danger',
        //             action: function () {
        //                 BootDialog.fire('一会儿再说');
        //             }
        //         }
        //     ]
        // });

        //iframe弹层,如果存在url参数，那么它会变成一个iframe弹层，这在项目开发中很有用
        // BootDialog.fire({
        //     url:'https://bootswatch.com/materia/',
        //     title: "弹层标题",
        //     body: "确定删除该用户么？",
        //     //false:不显示 close按钮
        //     btnShow: true,
        //     modalDialogClass:'modal-dialog-centered modal-xl',
        // });


        //显示复杂表单并处理输入
        BootDialog.fire({
            title: 'New message',
            body: `
                    <form>
                      <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                      </div>
                      <div class="mb-3">
                        <label for="message-text" class="col-form-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                      </div>
                    </form>
            `,

            footer: `
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary send-btn">Send message</button>
            `,

            onCreate: function (modal) {

                modal.element.onclick = function (event) {
                    event.preventDefault()

                    var form = modal.element.querySelector('form');

                    if (event.target.classList.contains('send-btn')) {

                        var Recipient = form.querySelector('#recipient-name').value;
                        var Message = form.querySelector('#message-text').value;
                        var Result = `
                            <b>Recipient</b>:${Recipient} <br/>
                            <b>Message</b>:${Message} <br/>
                        `;
                        BootDialog.fire(Result, '返回结果:')
                    }
                }
            }
        })


    });


</script>

</body>
</html>